<template>
  <div
    class="song-card flex bg-[var(--el-bg-color-overlay)] p-15px rounded-1 relative group cursor-pointer"
    @click="playSong"
  >
    <div class="relative w-122px h-122px rounded-6px overflow-hidden !mb-0">
      <el-image :src="songInfo.imageUrl" class="flex-none rounded-6px" fit="cover" />
      <div
        class="bg-black bg-op-40 absolute top-0 left-0 w-full h-full flex items-center justify-center"
      >
        <div class="bg-#00000080 rounded-100% h-66px w-66px flex justify-center items-center">
          <Icon
            :icon="
              currentSong.id === songInfo.id && !currentSong.paused
                ? 'svg-icon:bofang1'
                : 'svg-icon:zanting'
            "
            :size="23"
            color="#fff"
          />
        </div>
        <!-- <Icon
          :icon="
            currentSong.id === songInfo.id && !currentSong.paused
              ? 'solar:pause-circle-bold'
              : 'mdi:arrow-right-drop-circle'
          "
          :size="30"
          color="#fff"
        /> -->
      </div>
    </div>
    <div class="ml-8px flex-1 flex flex-col justify-center">
      <div class="text-18px line-clamp-1">{{ songInfo.title }}</div>
      <div
        v-if="songInfo.desc"
        class="mt-8px text-12px text-[var(--el-text-color-secondary)] line-clamp-2"
      >
        {{ songInfo.desc }}
      </div>
      <div class="music-operation mt-3px flex items-center text-16px text-[#9C9C9C]">
        <div type="primary" text v-if="status === AiMusicStatusEnum.IN_PROGRESS"> 生成中 </div>
        <div text v-else-if="status === AiMusicStatusEnum.SUCCESS"> 已完成 </div>
        <div type="danger" text v-else-if="status === AiMusicStatusEnum.FAIL"> 异常 </div>
      </div>
    </div>
    <div
      v-if="status === AiMusicStatusEnum.IN_PROGRESS"
      class="absolute w-full h-full top-0 left-0 z-5 opacity-70"
      v-loading="status === AiMusicStatusEnum.IN_PROGRESS"
    >
    </div>

    <div class="song-card-actions absolute top-2 right-2 flex z-10">
      <el-button
        class="!p-5px !m-0 !text-#B3B3B3"
        text
        :icon="Download"
        @click.stop="downloadSong"
      />
      <el-button class="!p-5px !m-0 !text-#B3B3B3" text :icon="Delete" @click.stop="deleteSong" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { inject, computed } from 'vue'
import { Download, Delete } from '@element-plus/icons-vue'
import { AiMusicStatusEnum } from '@/views/ai/utils/constants'

defineOptions({ name: 'SongCard' })

const props = defineProps({
  songInfo: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['play', 'delete', 'download'])

const currentSong: any = inject('currentSong', {})
const message = useMessage() // 消息弹窗
const status = computed(() => {
  // 优先用songInfo.status，否则用loading
  if (props.songInfo.status !== undefined) return props.songInfo.status
  return props.loading ? AiMusicStatusEnum.IN_PROGRESS : AiMusicStatusEnum.SUCCESS
})

function playSong() {
  if (status.value === AiMusicStatusEnum.FAIL) {
    message.warning('音乐生成异常，请重试')
    return
  } else if (status.value === AiMusicStatusEnum.IN_PROGRESS) {
    message.warning('音乐生成中，请稍后')
    return
  }
  emits('play')
}
function deleteSong() {
  emits('delete')
}
function downloadSong() {
  emits('download')
}

</script>

<style scoped lang="scss">
.song-card {
  position: relative;
  border-radius: 16px;
  transition: box-shadow 0.5s;

  &:hover {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 15%);
  }

  .song-card-actions {
    display: flex;
  }

  .music-operation {
    min-height: 28px;
  }
}
</style>
